<template>
  <div>
    <el-form label-width="80px" :model="form">
      <el-form-item label="文章标题">
        <el-input v-model="form.title" placeholder="请输入文章标题"></el-input>
      </el-form-item>

      <el-form-item label="文章封面">
        <el-upload
          action="http://localhost:3000/upload/article/img"
          :headers="setHearder"
          list-type="picture-card"
          name="articleImg"
          :on-success="onsuccess"
          :on-remove="onRemove"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="文章内容">
        <!--创建 wangeditor 挂载点 -->
        <div id="editor"></div>
      </el-form-item>
      <el-form-item label="文章来源">
        <el-radio v-model="form.stemfrom" label="原创">原创</el-radio>
        <el-radio v-model="form.stemfrom" label="转载">转载</el-radio>
      </el-form-item>

      <el-form-item>
        <el-button type="success" size="default" @click="submit"
          >发布文章</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Editor from "wangeditor";
import dayjs from "dayjs";
import { goArticles } from "@/api/article";
export default {
  data() {
    return {
      setHearder: {
        authorization: "Bearer " + this.$store.state.token,
      }, //上传头像的头信息
      form: {
        title: "",
        stemfrom: "",
        content: "",
        articleImg:''
      },
      editor: null,
    };
  },
  mounted() {
    // 创建wangeditor实例
    this.editor = new Editor("#editor");
    //配置上传的服务器端口
    this.editor.config.uploadImgServer =
      "http://localhost:3000/upload/editor/img";
    // 配置上传的字段名
    this.editor.config.uploadFileName = "editorFile";
    // 配置上传的请求头
    this.editor.config.uploadImgHeaders = {
      authorization: "Bearer " + this.$store.state.user.token,
    };
    // 设置不需要的菜单项
    this.editor.config.excludeMenus = [
      "emoticon",
      "backColor",
      "code",
      "video",
    ];
    //  设置富文本编辑器的高度
    this.editor.config.height = 300;
    // 设置富文本编辑器的提示文字
    this.editor.config.placeholder = "编辑文章内容";
    // 配置上传图片接口
    this.editor.create();
  },
  methods: {
    async submit() {
      //   富文本的内容
      let content = this.editor.txt.html();

      const { data } = await goArticles({
        id: Date.now(),
        title: this.form.title,
        stemfrom: this.form.stemfrom, //来源
        content: content,
        createTime: dayjs(new Date()).format("YYYY-MM-DD/HH:mm:ss"), //创建时间
        author: this.$store.state.user.username,
        articleImg: this.form.articleImg,
      });
      if (data.code == 200) {
        this.$message({
          message: "发布成功",
          type: "success",
        });
      } else {
        this.$message({
          message: "发布失败",
          type: "error",
        });
      }
    },

    //上传封面成功之后
    onsuccess(file) {
      
      this.form.articleImg = file.data;
    },
    //封面移除后钩子
    onRemove(file) {
      this.form.articleImg = ''
    },
  },
};
</script>

<style lang="less" scoped>
</style>